<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="css/businessInfo.css" rel="stylesheet">
    <script src="js/pageJump.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>饿了么 商家信息</title>
</head>

<body>
    <div class="wrapper" id="app">

        <!-- header部分 -->
        <header>
            <p>商家信息</p>
        </header>

        <!-- 商家logo部分 -->
        <div class="business-logo">
            <img :src="business.businessImg==null?null:business.businessImg">
        </div>
        <!-- 商家信息部分 -->
        <div class="business-info">
            <h1>{{business.businessName}}</h1>
            <p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
            <p>{{business.businessExplain}}</p>
        </div>

        <!-- 食品列表部分 -->
        <ul class="food" v-if="foodsInfo!=null">
            <li :key="index" v-for="(food, index) in foodsInfo">
                <div class="food-left">
                    <img :src="food.foodImg">
                    <div class="food-left-info">
                        <h3>{{food.foodName}}</h3>
                        <p>{{food.foodExplain}}</p>
                        <p>&#165;{{food.foodPrice}}</p>
                    </div>
                </div>
                <div class="food-right">
                    <div @click="subFood(index)">
                        <i :class="[food.quantity>0? 'fa fa-plus-circle':'fa fa-minus-circle']"></i>
                    </div>
                    <p><span>{{food.quantity}}</span></p>
                    <div @click="addFood(index)">
                        <i class="fa fa-plus-circle"></i>
                    </div>
                </div>
            </li>
        </ul>

        <!-- 购物车部分 -->
        <div class="cart">
            <div class="cart-left">
                <div class="cart-left-icon">
                    <i class="fa fa-shopping-cart"></i>
                    <div class="cart-left-icon-quantity" v-show="getCartLen>0">{{getCartLen}}</div>
                </div>
                <div class="cart-left-info">
                    <p>&#165;{{getTotalPrice}}</p>
                    <p>另需配送费{{business.deliveryPrice}}元</p>
                </div>
            </div>
            <div class="cart-right">
                <!-- 不够起送费 -->
                <div class="cart-right-item" v-if='getTotalPrice<business.starPrice'>&#165;{{business.starPrice}}起送</div>

                <!-- 达到起送费 -->
                <div class="cart-right-item" v-else @click="jumpTo('/order.html?id='+business.businessId)">去结算</div>
            </div>
        </div>

    </div>
    <script>
        var param=getRequest()
        var RequestPath=getRequestPath()
        var app=new Vue({
            el:"#app",
            data:{
                business:{businessImg:null},
                foodsInfo:[],
                
            },
            methods:{
                getBusinesses:async function(){
                    axios.post(RequestPath+"/BusinessController/getBusinessById",null,{
                        params:{
                            businessId:param.id
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){           
                            this.business=respon.data.detail
                            
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },
                getFoods:async function(){
                    axios.post(RequestPath+"/FoodController/listFoodByBusinessId",null,{
                        params:{
                            businessId:param.id
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){           
                            this.foodsInfo=respon.data.detail
                            this.getCart()
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },
                getCart:async function(){
                    axios.post(RequestPath+"/CartController/listCart",null,{
                        params:{
                            businessId:param.id
                        },
                        headers:{
                            Authorization:this.getAuthorization()
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){          
                            respon.data.detail.foods.forEach((element) => {
                                for(var i=0;i<this.foodsInfo.length;i++){
                                    if(this.foodsInfo[i].foodId==element.foodId){
                                        this.foodsInfo[i].quantity=element.quantity
                                        console.log(this.foodsInfo[i].quantity)
                                    }
                                }
                            })
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },
                addFood:function(index){
                    axios.post(RequestPath+"/CartController/saveCart",null,{
                        params:{
                            businessId:param.id,
                            foodId:this.foodsInfo[index].foodId
                        },
                        headers:{
                            Authorization:this.getAuthorization()
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){           
                            this.foodsInfo[index].quantity++
                        }else if(respon.data.code==400&&respon.data.detail.errorCode==401){
                            if(confirm("需先登录")){
                                jumpToLogin()
                            }
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },
                subFood:function(index){
                    if(this.foodsInfo[index].quantity>0)
                    axios.post(RequestPath+"/CartController/updateCart",null,{
                        params:{
                            businessId:param.id,
                            foodId:this.foodsInfo[index].foodId,
                            quantity:this.foodsInfo[index].quantity-1
                        },
                        headers:{
                            Authorization:this.getAuthorization()
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){           
                            this.foodsInfo[index].quantity--
                        }else if(respon.data.code==400&&respon.data.detail.errorCode==401){
                            if(confirm("需先登录")){
                                jumpToLogin()
                            }
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                    
                },
                jumpTo:function(u){
                    window.location.href=u
                },
                getAuthorization:function(){
                    return window.localStorage.getItem("Auth")
                },
                
            },
            created() {
                this.getBusinesses()
                this.getFoods()
                
            },
            computed:{
                getCartLen(){
                    var n=0
                    this.foodsInfo.forEach(item=>{
                        if(item.quantity>0)
                        n++
                    })
                    return n
                },
                getTotalPrice(){
                    var sum=0;
                    this.foodsInfo.forEach(item=>{
                        sum+=item.foodPrice*item.quantity
                    })
                    return sum
                }
                
            }
        })
    </script>
</body>

</html>